<template>	
		<z-paging ref="paging" 
			:fixed="false"
			:auto="false"
			:paging-style="{
				height: $device.measure.windowHeight - 44 - 51  + 'px',
				backgroundColor: '#fafafa'
			}" 
			v-model="tasks" 
			@query="queryList"
		>
		
		<!-- 执行管理 -->
		<view style="padding: 0rpx 40rpx;font-weight: bold;display: flex;align-items: center;">
			<view style="margin-right: 10rpx;height: 14px;width: 5rpx;background-color: #902eff;"></view> 
			任务管理 (众招)
		</view>
		<view style="margin: 20rpx;">
			<view style="display: flex;flex-wrap: wrap;">
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-jianzhi3" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">新建活动</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view @click="onTaskManage" style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-renyuanshuju" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view  style="font-weight: bold;">项目管理</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-renyuanguanli" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">找代理</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-zhanghao" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">代理管理</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 招聘管理 -->
		<view style="padding: 0rpx 40rpx;font-weight: bold;display: flex;align-items: center;">
			<view style="margin-right: 10rpx;height: 14px;width: 5rpx;background-color: #902eff;">
			</view> 
			招聘管理 (我是招聘员)
		</view>
		<view style="margin: 20rpx;">
			<view style="display: flex;flex-wrap: wrap;">
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-jianzhi3" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">新建自招</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view @click="onTaskManage" style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-renyuanshuju" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view  style="font-weight: bold;">项目管理</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-fangdichan" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">找项目</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-a-37wodejianzhi" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view @click="onPersonalSpace" style="font-weight: bold;">个人空间</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view @click="onChannelPromotion" style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-remenjianzhi1" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">公众号推广</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: center;;align-items: center;">
							<i class="iconfont icon-renyuanqun" style="margin-right: 20rpx;width: 65rpx;height: 65rpx;"></i>
							<view>
								<view style="font-weight: bold;">用户管理</view>
								<view style="color: #999;font-size: 12px;">新建兼职活动</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="padding: 0rpx 40rpx;font-weight: bold;display: flex;align-items: center;">
			<view style="margin-right: 10rpx;height: 14px;width: 5rpx;background-color: #902eff;border-radius: 5px;">
			</view> 
			数据统计
		</view>
		<view style="margin: 20rpx;">

			<view style="display: flex;flex-wrap: wrap;">
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: space-between;align-items: center;flex: 1 0;">
							<view style="display: flex;justify-content: space-between;flex: 1 0;">
								<view style="font-weight: bold;">提成收益(月)</view>
								<view style="color: #999;font-size: 12px;display: flex;align-items: center;">
									<view>16%</view>
									<u-icon name="arrow-upward" color="red"></u-icon>
								</view>
							</view>
						</view>
						<view style="display: flex;justify-content: flex-start;flex: 1 0;">
							<view style="font-weight: bold;padding: 30rpx 0;font-size: 20px;">￥7450.00</view>
						</view>
					</view>
				</view>
				<view style="flex:0 1 50%">
					<view style="background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx;box-shadow: 0px 0px 13px 0px #99999935;">
						<view style="display: flex;justify-content: space-between;align-items: center;flex: 1 0;">
							<view style="display: flex;justify-content: space-between;flex: 1 0;">
								<view style="font-weight: bold;">招聘人数(月)</view>
								<view style="color: #999;font-size: 12px;">16%<span>@</span></view>
							</view>
						</view>
						<view style="display: flex;justify-content: flex-start;flex: 1 0;">
							<view style="font-weight: bold;padding: 30rpx 0;font-size: 20px;">20354</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
<!-- 				<view @click="onAddTask" style="color:white;background-color: #ffa515;margin:10px 10px;justify-content: center;align-items:center;display: flex;padding: 20px 10px;height: 30px;border: solid 1rpx #dadada;border-radius: 5px;">
				<u-icon name="plus" size="18" :customStyle="{paddingRight:'3px',color:'#eee'}"></u-icon> 添加招聘任务
			</view> -->
			
<!-- 		<view v-if="tasks.length < 1" style="background-color: white;padding-top: 80px;">
				<u-empty
						mode="list"
						:icon="absUrl('/static/empty-list.jpg')"
						text="今日没有任务哦"
				>
				</u-empty>
				
				<view style="margin: 50px;">
					<u-button> 提交新任务 </u-button>
				</view>
			</view> -->
			
			<view style="display:flex;padding:0px 10px;justify-content: space-between;">
				<view v-for="(item,index) in list2" 
					@click="onTabClick(item,index)" 
					style="position: relative;color: white;margin-right: 10px;padding:2px 10px;border-radius: 50px;"
					:style="{
						backgroundColor:currentTabIndex == index ? '#ffa200' : '#f3f3f3',
						color: currentTabIndex == index ? '#ffffff' : '#aaaaaa'
					}"
				>
					{{item.name}}
					<view style="position: absolute;right: -6px;top: -6px;background-color: red;width: 17px;height: 17px;border-radius: 100px;display: flex;justify-content: center;align-items: center;">
						<view style="color: white;font-size: 12px;">99</view>
					</view>
				</view>
			</view>
			
			
			<!-- 什么鬼 -->
			<view v-for="(task,index0) in tasks" style="margin: 15px 15px 15px 15px;background-color: #fefefe;border-radius: 20rpx;position: relative;box-shadow: 0px 0px 13px 0px #99999945;">
				<view style="border-bottom: solid 1rpx #eee;padding: 2rpx 20rpx;">
					<view style="display: flex;justify-content: space-between;margin: 15rpx 15rpx;">
						<text style="font-size: 16px;font-weight: bold;display: flex;align-items: center;">{{task.title}}</text>
						<text style="font-size: 15px;margin-right: 5px;">{{$dayjs(task.start_date).fromNow()}}</text>
						<view>顺德.乐从</view>
					</view>
					<view style="display:flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;justify-content: flex-start;margin: 15rpx 15rpx;">
							<text style="margin-right: 5rpx;padding: 2rpx 8rpx;font-size: 12px;display: flex;align-items: center;color: white;background-color:#ff6a00;border-radius: 10rpx;">
								自有(已众招)
							</text>
							
							<text style="margin-right: 5rpx;padding: 2rpx 8rpx;font-size: 12px;display: flex;align-items: center;color: white;background-color:#ff6a00;border-radius: 10rpx;">
								众招项目
							</text>
						</view>
						 
						<!-- 工资 -->
						<view style="font-weight: bold;color: #f00;font-size: 13px;white-space: nowrap;justify-self: flex-end;">
							<span>{{task.jobs[0].price}}元/{{task.jobs[0].price_type}}</span>
							<span>/{{task.jobs[0].settle_type}}</span>
						</view>
					</view>
				</view>
						
				<view style="display:flex;flex-direction: column;padding:5px 10px;position: relative;">
					<view style="color:#999;padding-right: 10px;flex:1 1 0;display: flex;justify-content: space-between;align-items: center;padding:5px">
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">18</view>
							<view style="padding: 5px 0;font-size: 12px">需求</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">{{task.enrolls_count}}</view>
							<view style="padding: 5px 0;font-size: 12px">报名</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">{{task.comfirm_count}}</view>
							<view style="padding: 5px 0;font-size: 12px">确认</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">{{task.sign_up_count}}</view>
							<view style="padding: 5px 0;font-size: 12px">签到</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">{{task.sign_down_count}}</view>
							<view style="padding: 5px 0;font-size: 12px">签退</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">{{task.verified_count}}</view>
							<view style="padding: 5px 0;font-size: 12px">验收</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view style="font-size: 18px;font-weight: bold;color: #000">{{task.give_salary_count}}</view>
							<view style="padding: 5px 0;font-size: 12px">发薪</view>
						</view>
					</view>
					<view style="height: 1px;background-color: #902eff;width: 30%;position: absolute;bottom: 0;left: 0;"></view>
				</view>
				
<!-- 					<view>
					<jobCard :task="task"></jobCard>
				</view> -->
				
				<view  class="bottom_line" v-for="(formData,index) in task.jobs" style="display: flex;justify-content: space-between;align-items:center;line-height: 12px;padding: 0px 0px;">
					<!-- 内容区域 -->
					<view style="flex: 1 0 0%;display: flex;flex-direction: column;padding: 2px;">
						<view style="padding: 8px;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;">		
							<!-- 职位名称 -->
							<view style="flex: 1 1 55%;display: flex;justify-content: space-between;">
								<view style="font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{formData.name}}</text></view>
							</view>
							<!-- 人数 -->
							<span style="font-size: 12px;color: #9c9c9c;padding-left: 5px;white-space: nowrap;">1/{{formData.num}}人</span>
							
							<!-- 时间 -->
							<view style="flex:0 0 45%;text-align: right;color:#757575">
								<view style="line-height: 13px;font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{fixedTime(formData.start_time)}}-{{fixedTime(formData.end_time)}}</text></view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="display: flex;justify-content: space-between;border-top: solid 0.03125rem #eee;padding: 10px 10px;">
					
					<view v-if="!task.completed_at && !task.canceled_at" @click="showPromotion(task)" style="display: flex;align-items: center;padding: 5px 10px;height: 30px;background-color: #902eff;color: #ff9d00;border-radius: 10rpx;box-shadow: 0px 0px 13px 0px #902eff55;">
						<u-icon name="share-square" color="white"></u-icon>
						<span style="font-size: 24rpx;padding-left:3px;color:white">职位推广</span>
					</view>
					
					<view v-if="task.completed_at" @click="downloadReport(task)" style="display: flex;align-items: center;padding: 5px 10px;height: 30px;background-color: #47b300;color: #ff9d00;border-radius: 10rpx;box-shadow: 0px 0px 13px 0px #4bc30055;">
						<i class="iconfont icon-xiazai" style="color:white"></i>
						<span style="font-size: 24rpx;padding-left:3px;color:white">下载报表</span>
					</view>
					
					<view @click="onOrganize(task)" style="border: solid 1rpx #eee;justify-content: center;align-items:center;display: flex;padding: 5px 10px;height: 30px;border-radius: 5px;box-shadow: 0px 0px 13px 0px #99999945;">
						 <i class="iconfont icon-yunsuancaozuo" style="margin: 5px;color: #ff6a00;font-size:20px"></i>
						 <view style="color:#ff8d01;">
							 活动管理
						</view>
					</view>
				</view>
			</view>	
		</z-paging>

			<!-- 列表衬底 -->
			<!-- <view style="height: 55px;"></view> -->

		<taskPromotion 
			v-model:showPost="showPost" 
			v-model:showPromotionActions="showPromotionActions"
			v-model:showActions="showActions"
			:currentTask="currentTask"
		></taskPromotion>
</template>

<script>
	import jobCard from '@/components/job-card/job-card.vue'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'
	import workData from '@/utils/data/workData.js'
	import {LRUCache} from 'lru-cache'
	import taskPromotion from '@/components/task-promotion.vue'
	
	let cache = new LRUCache({max:10,ttl:5000})
	
	import {reactive,provide } from 'vue'
	
	export default {
		setup(){
			let _scope = reactive({})
			provide('_scope',_scope)
			return {_scope}
		},
		components:{
			jobCard,
			taskPromotion
		},
		mixins:[
			timeTextFormat,workData
		],
		data() {
			return {
				showPromotionActions:false,
				showActions:false,
				showPost:false,
				currentTask:null,
				currentTabIndex:0,
				calendarIndex:0,
				tasks:[],
				list2: [
					{
						name: '今日',
						date: this.$dayjs().format('YYYY-MM-DD'),
						type: 'doing'
					},
					{
						name: '明日',
						date: this.$dayjs().add(1,'day').format('YYYY-MM-DD'),
						type: 'not-started'
					},
					{
						name: '待完结',
						date: '',
						type:'unfinished'
					},
					{
						name: '已完结',
						date: '',
						type:'finished'
					},
					{
						name: '已取消',
						date: '',
						type:'canceled'
					}
				],
				currentTabIndex: -1,
				currentItem:null,
			}
		},
		computed:{
			currentProjects(){
				return (index)=>{
					switch (index){
						case 0:
							return this.tasks
						case 1:
							return this.doingProjects
					}
				}
			}
		},
		async mounted() { 
			this.currentTabIndex = 0,
			this.currentItem = this.list2[0]
			this.$refs.paging.reload()
		
		},
		methods: {
			onTaskManage(){
				uni.navigateTo({
					url:'/tasks_manage'
				})
			},
			onPersonalSpace(){
				
				if(this.$localStorage.getItem('userinfo')){
					let userInfo = JSON.parse(this.$localStorage.getItem('userinfo'));
					userInfo.style = `background-image:url("+userInfo.avatar+");`
					this.avatar = userInfo.avatar;
					this.uid = userInfo.uid;
					this.group = userInfo.group;
					if(userInfo.screenName){
						this.name = userInfo.screenName;
					}else{
						this.name = userInfo.name;
					}
					
					var name = '';
					if(userInfo.screenName){
						name = userInfo.screenName;
					}else{
						name = userInfo.name;
					}
					
					var title = userInfo.name+"的信息";
					if(userInfo.screenName){
						title = userInfo.screenName+" 的信息";
						name = userInfo.screenName
					}
					
					var id= 1 //userInfo.uid;
					
					uni.navigateTo({
					    url: '/typecho/space/userinfo?title='+title+"&name="+name+"&uid="+id+"&avatar="+encodeURIComponent(userInfo.avatar)
					});
				}
				
				// uni.navigateTo({
				// 	url:'/personal/space'
				// })
				
				// uni.navigateTo({
				// 	url:'/pages/job/publish/job-space/job-space'
				// })
			},
			showPromotion(task) {
				this.showPromotionActions = true
				this.currentTask = task
				//this.onInvite(task)
			},
			onChannelPromotion() {
				uni.navigateTo({
					url:'/pages/job/publish/job-offices/job-offices'
				})
			},
			onTabClick(item,index){
				if(this.currentTabIndex != index)
				{
					this.currentTabIndex = index
					this.currentItem = item
				}

				this.$refs.paging.reload()	
			},
			async queryList(NoPage,pageSize){
				let that = this
				
				// if(this.isNoMore)  return true
				
				uni.showLoading({
					title:'正在加载'
				})

				let res = await this.$http.get(
				`/manager/job/task/list/all?start_date=${this.currentItem.date}&type=${this.currentItem.type}&page=${NoPage}&size=${pageSize}`
				,{
					cache:this.$cache30s
				})
				
				this.$refs.paging.complete(res.data.data)

				uni.hideLoading()
			},
			onOrganize(task){ 
				console.log(this._scope)
				this._scope.task = task
				console.log(this._scope)
				this.currentTask = task
				this.showActions = true
				
				let that = this
				uni.$once('job-actions-done',function(){
					that.$refs.paging.reload()	
					that.showActions = false
				})
			},
			onEnrollShare(){
				this.showPost = true
				// uni.navigateTo({
				// 	url:"/pages/enter/user-enroll/user-enroll"
				// })
			},			
			addJobProject(){
				console.log(this.user.name)
			},
			async downloadReport(task){
				console.log(task)
				let res = await this.$http.post('/common/storage/xlsx',{
					task_id:task.id
				})
				
				console.log(res.data)
				console.log(this.$urls.assets + res.data)
				
				uni.showLoading({
					title:'正在下载'
				})
				
				let download = await uni.downloadFile({
					url:this.$urls.assets + res.data
				})
				
				uni.hideLoading()
				
				if(download.statusCode == 200)
				{
					uni.showToast({
						title:'下载成功'
					},1200)
				}else{
					uni.showToast({
						title:'下载失败',
						icon:'error'
					},1200)
				}
				
				// #ifdef H5
					const aEle = document.createElement('a');
					aEle.download = `${task.title}-${task.start_date}.xlsx`; // 设置下载的文件名，默认是'下载'
					aEle.href = download.tempFilePath;
					document.body.appendChild(aEle);
					aEle.click();
					aEle.remove();
				// #endif 
				
				// #ifdef MP
					uni.openDocument({
						filePath:download.tempFilePath,
						showMenu:true
					})
				// #endif
			}
		}
	}
</script>

<style>

</style>
